$breakpoints:(
  'xs': 'only screen and ( max-width: 480px)',
  'sm': 'only screen and ( min-width: 481px) and ( max-width: 768px)',
  'md': 'only screen and ( min-width: 768px) and ( max-width: 992px)',
  'lg': 'only screen and ( min-width: 992px) and ( max-width: 1200px)',
)!default;

@mixin respond-to($breakpoint) {
    $query: map-get($breakpoints, $breakpoint);
    @if not $query {
        @error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.';
    }
    @media #{if(type-of($query) == 'string', unquote($query), inspect($query))} {
        @content;
    }
}

